<template>
  <div>
    <el-form label-position="top" label-width="80px">
      <el-form-item :label="$t('setting.namesrvAddrListLabel')">
        <el-tag style="margin-left: 10px;" v-for="addr in namesrvAddrList" :key="addr" :closable="true" :close-transition="true" @close="delNamesrvAddr(addr)">{{addr}}</el-tag>
        <el-input style="width: 200px;margin-left: 10px;vertical-align: bottom;height: 30px" v-if="addNamesrvAddInputVisible" v-model="namesrvAddr" ref="saveAddrInput" size="mini" @keyup.enter.native="handleAddAddrConfirm" @blur="handleAddAddrConfirm"></el-input>
        <el-button v-else size="small" @click="showAddAddrInput">{{$t('setting.namesrvAddrAddBtn')}}</el-button>
      </el-form-item>
      <el-form-item :label="$t('setting.isUseVipChannelLabel')">
        <el-switch on-text="" off-text="" v-model="isUseVipChannel"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">{{$t('common.save')}}</el-button>
        <el-button @click="cancel">{{$t('common.cancel')}}</el-button>
      </el-form-item>
    </el-form>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">aaa</span>
    <span style="display: block;padding: 100px;">end</span>
  </div>
</template>
<script>
  import {get} from '@/config'
  export default {
    mounted () {
      this.getSettingInfo()
    },
    data () {
      return {
        namesrvAddrList: [],
        namesrvAddr: '',
        addNamesrvAddInputVisible: false,
        isUseVipChannel: false
      }
    },
    methods: {
      getSettingInfo () {
        let that = this
        get('/api/setting/settingInfo', function (res) {
          let info = res.data.settingInfo
          that.namesrvAddrList = info.namesrvAddrList
          that.isUseVipChannel = info.isUseVipChanel
        }, function (res) {
          that.$message({
            message: '连接错误',
            type: 'error'
          })
        })
      },
      save () {
      },
      cancel () {
      },
      showAddAddrInput () {
        this.addNamesrvAddInputVisible = true
        let that = this
        this.$nextTick(function () {
          that.$refs.saveAddrInput.$refs.input.focus()
        })
      },
      handleAddAddrConfirm () {
        let namesrvAddr = this.namesrvAddr
        if (namesrvAddr) {
          this.namesrvAddrList.push(namesrvAddr)
        }
        this.addNamesrvAddInputVisible = false
        this.namesrvAddr = ''
      },
      delNamesrvAddr (addr) {
        console.log(addr)
        this.namesrvAddrList.splice(this.namesrvAddrList.indexOf(addr), 1)
      }
    }
  }
</script>
